<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="list-box">
    <div class="go-back" @click="handleGoBack">
      <el-icon class="new-btn" style="margin-right: 10px"><ArrowLeft /></el-icon>
      <div class="new-btn">新增Value</div>
    </div>
   <div class="new-add">
     <el-form :model="formData" label-width="120px" >
      <el-form-item label="name" >
        <el-input v-model="formData.name" placeholder="请输入name" />
      </el-form-item>
      <el-form-item label="value" >
        <el-input v-model="formData.value" placeholder="请输入value" />
      </el-form-item>
      <el-form-item label="key" >
        <el-input v-model="formData.key" placeholder="请输入key" />
      </el-form-item>
      <el-form-item label="标签" >
        <el-input v-model="formData.label" placeholder="请输入标签" />
      </el-form-item>
      <el-form-item label="数据类型" >
        <el-select
          v-model="formData.dataType"
          placeholder="请选择数据类型">
          <el-option
            v-for="(item, index) in dataPtions"
            :key="index"
            :value="item.val"
            :label="item.name"
          />
      </el-select>
      </el-form-item>
      <el-form-item label="是否提供可选项" >
        <el-select
          v-model="formData.provideOptions"
          placeholder="请选择是否提供可选项">
          <el-option
            v-for="(item, index) in provideOptions"
            :key="index"
            :value="item.val"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <div class="submit-button"><el-button type="primary" @click="handleSubmit">提交</el-button></div>
    </el-form>
   </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { assetsManage } from '@/services/assets'
import { dataPtions, provideOptions } from '@/plugins/config'
// import { useStore } from 'vuex'

const nodeId = ref('')

const router = useRouter()
const route = useRoute()
const formData = ref<any>({
  name: '',
  label: ''
})

const handleSubmit = async () => {
  const valueNodes = [{
    name: formData.value.name,
    dataType: formData.value.dataType,
    provideOptions: formData.value.provideOptions,
    code: '',
    key: formData.value.key,
    nodeType: 'VALUE_NODE',
    parentId: nodeId.value,
    label: [
      formData.value.label
    ]
  }]
  try {
    const res = await assetsManage.addValueNodeRequst({ valueNodes })
    if (res.code === '000000') {
      router.go(-1)
    }
  } catch (error) {
    console.log(error)
  }
}
onMounted(() => {
  const { id = '' } = route.query
  nodeId.value = id
  console.log(route)
})
onBeforeMount(() => {
  console.log(route.query)
})

const handleGoBack = () => {
  router.go(-1)
}
</script>

<style scoped lang="less">
.go-back{
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  font-weight: 800;
  font-size: 24px;
}
:deep(.el-input){
  width: 200px;
}
.submit-button{
  margin: 30px 0px 0px 120px;
}
.new-add{
  margin-left: 24px;
}
.new-btn {
  cursor: pointer;
}
</style>
